<template>
  <div class='common_actionBar_container' v-if="visible">
    <div class='common_actionBar'>
      <image class='common_actionBar_search' v-if='search' src='/static/images/home/_unitPersonnelManaage/search.png' @click="$emit('searchEvent', $event)"></image>
      <a v-if='href' @click="$emit('spanEvent', $event)" :href='href' :style="'color:' + (filter ? '#e61e10' : '')">{{span}}</a>
      <span v-else @click="$emit('spanEvent', $event)" :href='href' :style="'color:' + (filter ? '#e61e10' : '')">{{span}}</span>
    </div>
  </div>
</template>
<script>
/**
 * 作者：jzx
 * 描述：由于小程序顶部被占，所以封装一个操作栏放在顶部小程序栏下面
 */
export default {
  props: {
    search: Boolean, // 是否有搜索按钮
    searchEvent: Function, // 在有搜索按钮的前提下的搜索事件
    span: String, // 是否展示span
    spanEvent: Function, // 在有span的前提下的span的点击事件
    href: {
      type: String,
      default: ''
    }, // 支持路由直接跳转
    visible: { // 动作栏是否可见
      type: Boolean,
      default: true
    },
    filter: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped>
.common_actionBar_container {
  width: 100%;
  height: 60upx;
  z-index: 10;
}
.common_actionBar {
  height: inherit;
  width: 100%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 32upx;
  color: black;
  text-align: right;
  background: #FFFFFF;
  position: fixed;
  top: 0upx;
  left: 0upx;
  box-shadow: 0 0 10px #a67979 
}
.common_actionBar > span, .common_actionBar > image, .common_actionBar > a {
  box-sizing: border-box;
  margin-right: 20upx;
}
.common_actionBar_search.common_actionBar_search {
  width:32upx;
  height:35upx;
}
.red_dot {
  background: #e61e10;
  width: 10upx;
  height: 10upx;
  border-radius: 9999upx;
  position: absolute;
  right: -3upx;
  top: 12upx;
}
</style>